<!DOCTYPE html>
<!-- Website template by freewebsitetemplates.com -->
<html >
	<head>
		<meta charset="UTF-8">
		<title>Helicopter Transportation Website Template</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> -->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script src="js/navtab.js"></script>
		<!-- <script src="js/test.js"></script> -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
		<!-- <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
		<script src="js/swiper-3.4.2.jquery.min.js"></script> -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.min.css">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/js/swiper.min.js"></script>
		

	</head>
	<body>

		<div id="page">
			<div id="header">
				<div class="background">
					<div id="navigation">
						<ul id="nav-mainbox">
							<li>
								<a href="index.html">Home</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div id = "contents">
			<div id = "body">
			<!-- <div id = "content"> -->
				<div id=tabs>
				<template>
					<el-tabs :tab-position="tabPosition"  @tab-click="handleClick">
					  <el-tab-pane label="论文">
						<div class="swiper-container">
							<div  class="swiper-wrapper" >
								<!-- <div v-for="year in yearList" >
								<div onclick="liClick(this)" class="swiper-slide">slide1</div>
							</div> -->														
							</div>							
							<!-- 如果需要滚动条 -->
							<div class="swiper-scrollbar"></div>
						</div>
						<el-collapse  @change="handleChange" accordion >
							<div v-for="achievement in achievements">
							<el-collapse-item class="title" >
								<span  slot="title" class="tem">
									{{achievement.Title}}
								</span>
							   <div>{{achievement.Abstracts}}</div>
							</el-collapse-item>
							<el-button class="btn" size="mini" @click="test" plain><i class="el-icon-download"></i>下载</el-button>
						</div>
						</el-collapse>
					  </el-tab-pane>
					  <el-tab-pane label="专利">
						<div class="swiper-container">
							<div  class="swiper-wrapper" >
								<!-- <div v-for="year in yearList" >
								<div onclick="liClick(this)" class="swiper-slide">slide1</div>
							</div> -->														
							</div>							
							<!-- 如果需要滚动条 -->
							<div class="swiper-scrollbar"></div>
						</div>
						<el-collapse  @change="handleChange" accordion >
							<div v-for="achievement in achievements">
							<el-collapse-item class="title" >
								<span  slot="title" class="tem">
									{{achievement.Title}}
								</span>
							   <div>{{achievement.Abstracts}}</div>
							</el-collapse-item>
							<el-button class="btn" size="mini" @click="test" plain><i class="el-icon-download"></i>下载</el-button>
						</div>
						</el-collapse>
					  </el-tab-pane>
					  <el-tab-pane label="获得奖项">
						<div class="swiper-container">
							<div  class="swiper-wrapper" >
								<!-- <div v-for="year in yearList" >
								<div onclick="liClick(this)" class="swiper-slide">slide1</div>
							</div> -->														
							</div>							
							<!-- 如果需要滚动条 -->
							<div class="swiper-scrollbar"></div>
						</div>
						<el-collapse  @change="handleChange" accordion >
							<div v-for="achievement in achievements">
							<el-collapse-item class="title" >
								<span  slot="title" class="tem">
									{{achievement.Title}}
								</span>
							   <div>{{achievement.Abstracts}}</div>
							</el-collapse-item>
							<el-button class="btn" size="mini" @click="test" plain><i class="el-icon-download"></i>下载</el-button>
						</div>
						</el-collapse>
					  </el-tab-pane>
					</el-tabs>
				  </template>
				</div>
				  <script>
					  obj=new Vue({
					  el:'#tabs',
					  data() {
						return {
						  tabPosition: 'left',
						  currentDate: new Date(),
						  achievementsList:[],
						  achievements:[],
						  yearList:[]
						};
					  },


					  methods: {

					    handleClick(tab, event) {
						axios.post('http://localhost:5000/api/achievements/getachievementsbycategory',{category:tab.label
						}) .then(res=>{
							console.log(res)
                            this.achievementsList=res.data
						}).catch(err=>{console.log(err)})
						console.log(tab.label);
						axios.post('http://localhost:5000/api/achievements/getyearbycategory',{category:tab.label}
						).then(res=>{console.log(res),this.yearList=res.data
							this.achievements=this.achievementsList.filter(item=>item.Year==res.data[0])							
							let swiper=""
							for(var i=0;i<this.yearList.length;i++){
								swiper+='<li onclick="liClick(this)" class="swiper-slide">'+this.yearList[i]+'</li>'
							}
							$(".swiper-wrapper").html(swiper)
							console.log(this.achievements)
						}).catch(err=>{console.log(err)})
						},
						firstTab(){
						axios.post('http://localhost:5000/api/achievements/getachievementsbycategory',{category:"论文"}
						).then(res=>{console.log(res),this.achievementsList=res.data
						}).catch(err=>{console.log(err)})
						},
						getyear(){
						axios.post('http://localhost:5000/api/achievements/getyearbycategory',{category:"论文"}
						).then(res=>{console.log(res),this.yearList=res.data
							this.achievements=this.achievementsList.filter(item=>item.Year==res.data[0])
							
							let swiper=""
							for(var i=0;i<this.yearList.length;i++){
								swiper+='<li onclick="liClick(this)" class="swiper-slide">'+this.yearList[i]+'</li>'
							}
							$(".swiper-wrapper").html(swiper)
							console.log(this.achievements)
						}).catch(err=>{console.log(err)})
						},
						handleChange(val) {
						console.log(val);
						},
						test(){
							console.log("sdfdfASD")
						}
						},

						mounted () {
						this.firstTab()
						this.getyear()
								}
					})
				  </script>
				<div id = "section2">
				</div>
			</div>
			</div>

		</div>
		<script>

			var mySwiper = new Swiper ('.swiper-container', {
			  direction: 'horizontal',
			//   mousewheelControl : true,
			  mousewheel: true,
			  centeredSlides : true,
			  centeredSlidesBounds: true,
			  mousewheelSensitivity : 5,
			  observer:true,
			  observeParents:true,
			  slidesPerView : 8,  
              slidesOffsetAfter : 0,
			  // 如果需要滚动条
			  scrollbar: '.swiper-scrollbar',
			  scrollbarHide:false,
			})

			</script>
	</body>
</html>
<script>

	function liClick(data){
		var value=($(data).text());
		obj.achievements=obj.achievementsList.filter(
		item=>item.Year == value )
		console.log(obj.achievements)	}
	// $.ajax({
    //             url: 'http://localhost:5000/api/achievements/getachievementsByyear',
    //             type: "post",
    //             contentType: "application/json",
    //             data:JSON.stringify("2025"),
    //             success: function (data) {
    //                 console.log(data);
    //             }
    //         });
	// })
</script>
<style>




	.image {
	  width: 148px;
	  height: 200px;
	  float: left;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}
	.text {
    font-size: 14px;
  }

  .item {
	margin-bottom: 18px;

  }
  .btn{
	float: right;
	margin-top: 10px;


  }
.title{
	float: left;
	width: 90%;
	margin-left:10px;


}
.tem{
	flex: 1 0 90%;
    order: 1;
}
.el-collapse-item__header {
        flex: 1 0 auto;
        order: -1;
    }
	.el-collapse{
		border-top: 0;
		border-bottom:0px
	}

.swiper-container {
    width: 800px;
    height: 50px;
}
.swiper-slide{
	width: 100px;
	display: block;
	cursor: pointer;
	text-align:center;
}

  </style>